import React, { useEffect, useState } from 'react'
import http from '../../utils/http'
import { IndexBar, List, Card, Tag, SearchBar, Popup } from 'antd-mobile'
function Index() {
  const [visible1, setVisible1] = useState(false)
  let [listCity, setListCity] = useState([])
  let [listHot, setListHot] = useState([])
  let [seach, setSeach] = useState({})
  // 城市列表
  let getList = async () => {
    let res = await http.get('/api/city')

    console.log(res);

    let { code, data } = res.data

    if (code === 200) {
      setListCity(data.city)
      setListHot(data.hotCities)
    }

  }
  useEffect(() => {
    getList()
  }, [])

  const handleSeach = async (type) => {
    let res1 = await http.get('/api/city/search', { params: { wd: type } })
    // setVisible1(true)
    console.log(res1);

    let { code, data } = res1.data

    if (code === 200) {
      setSeach(data)
    }

  }
  console.log(seach);
  
  return (
    <div>
      <SearchBar placeholder='请输入内容'
        onSearch={(val) => handleSeach(val)}

      />
      <Card title='热门城市'>
        {
          listHot?.map((item, ind) => (
            <Tag key={ind} style={{ margin: '20px' }}>{item.name}</Tag>
          ))
        }
      </Card>
      <Card title='城市列表'>
        <div style={{ height: window.innerHeight }}>
          <IndexBar>
            {listCity?.map(group => {
              const { initial, list } = group
              return (
                <IndexBar.Panel
                  index={initial}
                  title={`${initial}`}
                  key={`${initial}`}
                >
                  <List>
                    {list.map((item, index) => (
                      <List.Item key={index}>{item.name}</List.Item>
                    ))}
                  </List>
                </IndexBar.Panel>
              )
            })}
          </IndexBar>
        </div>
      </Card>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}
        bodyStyle={{ height: '95vh' }}
      >
        {/* {
          seach.map((item,ind)=>(
            <span key={ind}>{item.name}</span>
          ))
        } */}
      </Popup>
    </div>
  )
}

export default Index
